class Tab{
				constructor(id){
					this.oBox=document.querySelector(id)
					this.aBtn=this.oBox.querySelectorAll(".btnList input");
			        this.aLi=this.oBox.querySelectorAll(".content li")
				    this.clickLeft=this.oBox.querySelector(".left");
				    this.clickRight=this.oBox.querySelector(".right");
				    this.show()
				}
			    show(){
			    	var _this=this;
					for(let i=0;i<this.aBtn.length;i++){
						this.aBtn[i].onclick=function(){
							_this.fn(i)
//							console.log(i)
						}
					}
					
			    }
			    fn(i){
			    	for(var j=0;j<this.aBtn.length;j++){
							this.aBtn[j].className="";
							this.aLi[j].className="";
						}
						this.aBtn[i].className="active";
						this.aLi[i].className="show"
			    }
			
			}


        class ClickTab extends Tab{
        	constructor(id){
        		super(id);
        		this.clickFn();
        		this.index=0;
        	}
        	clickFn(){
//      		console.log(this.clickLeft)
                var _this=this
                this.clickLeft.onclick=function(){
                	_this.index--;
//              	console.log(_this.index)
                	if(_this.index<0){
                		_this.index=_this.aBtn.length-1
                	}
                	_this.fn(_this.index)
                }
                this.clickRight.onclick=function(){
                	_this.index++;
                	if(_this.index>_this.aBtn.length-1){
                		_this.index=0
                	}
                	_this.fn(_this.index)
//              	console.log(_this.index)
                	
                }
        	}
        }
